<template>
  <div class="auth-wrapper">
    <el-form
      ref="formRef"
      size="large"
      :model="formState"
      :rules="loginRules"
      class="auth-form"
      label-position="top"
      @submit.prevent="handleSubmit"
    >
      <h1 class="auth-form__title">TCP拥塞加速（TCC）管理系统</h1>
      <el-form-item :label="`${$t('label.username')}`" prop="username">
        <el-input
          v-model.trim="formState.username"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="`${$t('label.password')}`"
        class="mb-[62px] mt-[43px]"
        prop="password"
      >
        <el-input
          v-model.trim="formState.password"
          placeholder="请输入密码"
          :type="passwordType"
        >
          <template #suffix>
            <div class="flex items-center gap-x-2">
              <img
                class="w-4 h-4 cursor-pointer"
                :src="passwordType ? icons.YAN01 : icons.YAN02"
                @click="togglePasswordType"
                @contextmenu.prevent
              />
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="auth-form__submit"
          :loading="loading"
          @click="handleSubmit"
          >{{ $t('buttons.login') }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// import { omit } from 'lodash-es'
import { useAppStore } from '@/stores/modules/app'
import { ElForm, type FormRules } from 'element-plus'
import icons from '@/assets/modules/icons'
const formRef = ref(ElForm)
// const active = ref('username')
const loading = ref(false)

const appStore = useAppStore()
interface FormState {
  username: string
  password: string
}
const formState = ref<FormState>({
  username: 'test01',
  password: 'abcd.1234'
})
//密码正则
//只能包含字母、数字以及下划线，且至少包含2种/^(?![0-9]+$)(?![_]+$)(?![a-zA-Z]+$)[A-Za-z_0-9]{1,}$/
const nameReg = /^[0-9a-zA-Z]{4,18}$/
const pwdReg =
  /^(?![0-9]+$)(?![\(\)\`\!\@\#\$\%\^\&\*\_\-\+\=\|\{\}\[\]\:\;\'\<\>\,.\?]+$)(?![a-zA-Z]+$)[A-Za-z\(\)\`\!\@\#\$\%\^\&\*\_\-\+\=\|\{\}\[\]\:\;\'\<\>\,.\?0-9]{6,128}$/
const validateName = (_rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入账号'))
  } else if (!nameReg.test(value)) {
    callback(new Error('账号格式有误'))
  } else {
    callback()
  }
}
const validatePassword = (_rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入密码'))
  } else if (!pwdReg.test(value)) {
    callback(new Error('密码格式有误'))
  } else {
    callback()
  }
}
const loginRules = reactive<FormRules>({
  username: [
    {
      required: true,
      validator: validateName,
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      validator: validatePassword,
      trigger: 'blur'
    }
  ]
})
const passwordType = ref<string | undefined>(undefined)
const togglePasswordType = () => {
  passwordType.value = !passwordType.value ? 'password' : undefined
}
/**
 * 登录事件
 */
const handleSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true
      appStore
        .signInAction(formState.value)
        .finally(() => (loading.value = false))
    }
  })
}
</script>

<style scoped lang="scss">
.auth-wrapper {
  @apply w-screen h-screen relative;
  background: url('@/assets/modules/auth/bg.jpg') no-repeat center center;
  background-size: cover;
  .auth-form__tabs {
    :deep(.el-tabs__header) {
      @apply mb-8;
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
        .el-tabs__item {
          padding: 0 16px;
          &:nth-of-type(2) {
            padding-left: 0 !important;
          }
        }
      }
    }
  }
  .auth-form {
    @apply absolute top-1/2 text-sm rounded-xl bg-[rgba(255,255,255,0.55)] py-14 px-[50px];
    transform: translateY(-50%);
    width: 420px;
    height: 434px;
    right: 15.6%;
    box-shadow: 2px 2px 50px 0px rgba(58, 58, 58, 0.04);
    .tips-text {
      color: #999999;
    }
    &__title {
      margin: 0 0 47px;
      font-size: 20px;
      letter-spacing: 0px;
      text-align: center;
      font-weight: 500;
    }
    :deep(.el-form-item) {
      .el-form-item__label {
        @apply mb-0  text-[#333];
      }
      .el-form-item__label::before {
        content: '';
      }
      .el-form-item__error {
        @apply pt-[6px] text-[#EA2C2C] text-[14px];
      }
      .el-input__wrapper {
        padding: 1px 0;
        border-radius: 0;
        box-shadow: 0 1px #e7e7e7;
        background-color: transparent;
        &:hover,
        &.is-focus {
          box-shadow: 0 1px var(--el-input-focus-border-color);
        }
        .el-input__inner {
          color: #333;
        }
      }
    }
    &__submit {
      @apply w-full rounded;
      background: #4f87f6;
      font-weight: 500;
    }
  }
}
</style>
